<template>
	<view>
		<view class="wrap">
			<view class="u-tabs-box">
				<u-tabs-swiper activeColor="#f29100" ref="tabs" :list="list" :current="current" @change="change"
					:is-scroll="false" swiperWidth="750"></u-tabs-swiper>
			</view>
			<swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @change="swiperChange"
				@animationfinish="animationfinish">
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
						<w-order-item :orderList='showList' @delOrder='delOrder' :current='current'
							:loadStatus='loadStatus[0]'></w-order-item>
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
						<w-order-item :orderList='showList' :current='current' :loadStatus='loadStatus[1]'>
						</w-order-item>
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;">
						<w-order-item :orderList='showList' @delOrder='delOrder' :current='current'
							:loadStatus='loadStatus[2]'></w-order-item>
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
						<w-order-item :orderList='showList' :current='current' :loadStatus='loadStatus[3]'>
						</w-order-item>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import {
		getOrders
	} from '@/api/shop.js'
	import {
		$shopImgUrl
	} from '@/service/request.js'
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				orderList: [
					[],
					[],
					[],
					[]
				],
				showList: [],
				orderPageNum: [1, 1, 1, 1],
				list: [{
						name: '待付款'
					},
					{
						name: '待发货'
					},
					{
						name: '待收货'
					},
					{
						name: '已完成'
					}
				],
				current: 0,
				swiperCurrent: 0,
				tabsHeight: 0,
				dx: 0,
				loadStatus: ['loadmore', 'loadmore', 'loadmore', 'loadmore'],
			};
		},
		onLoad() {
			this.getOrderList(0);
			this.getOrderList(1);
			this.getOrderList(2);
			this.getOrderList(3);
		},
		computed: {
			...mapState(['userInfo']),
			// 价格小数
			priceDecimal() {
				return val => {
					if (val !== parseInt(val)) return val.slice(-2);
					else return '00';
				};
			},
			// 价格整数
			priceInt() {
				return val => {
					if (val !== parseInt(val)) return val.split('.')[0];
					else return val;
				};
			}
		},
		methods: {
			delOrder(dix, index) {
				this.orderList[dix].splice(index, 1)
				this.showList = this.orderList[dix]
			},
			reachBottom() {
				this.loadStatus.splice(this.current, 1, "loading")
				const num = this.orderPageNum[this.current] + 1
				this.orderPageNum[this.current] = num
				this.getOrderList(this.current);
			},
			// 页面数据
			getOrderList(idx) {
				getOrders({
					JSESSIONID: uni.getStorageSync('sessionid'),
					idUser: this.userInfo.id,
					status: idx + 1,
					pageNo: this.orderPageNum[idx],
					pageSize: 10
				}).then(res => {
					const arr = res.list
					this.orderList[idx] = this.orderList[idx].concat(arr.map(item => {
						return {
							...item,
							items: item.items.map(val => {
								return {
									...val,
									pic: $shopImgUrl + val.goods.pic
								}
							})
						}
					}))
					this.showList = this.orderList[idx]
					if (arr.length == 10) {
						this.loadStatus.splice(this.current, 1, "loadmore")
					} else {
						this.loadStatus.splice(this.current, 1, "nomore")
					}
				})
			},
			// tab栏切换
			change(index) {
				this.swiperCurrent = index;
				this.showList = this.orderList[index]
			},
			swiperChange(e) {
				this.showList = this.orderList[e.detail.current]
			},
			transition({
				detail: {
					dx
				}
			}) {
				this.$refs.tabs.setDx(dx);
			},
			animationfinish({
				detail: {
					current
				}
			}) {
				this.$refs.tabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			}
		}
	};
</script>

<style>
	/* #ifndef H5 */
	page {
		height: 100%;
		background-color: #f2f2f2;
	}

	/* #endif */
</style>

<style lang="scss" scoped>
	.wrap {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
	}

	.swiper-box {
		flex: 1;
	}

	.swiper-item {
		height: 100%;
	}
</style>
